<template>
    <div id="detail">
        <div  v-if="filmInfo" :key="filmInfo.filmId">
             <detail-header v-scroll="50">
                <span >{{ filmInfo.name }}</span>
            </detail-header>
            <div class="content">
                <div class="filmPoster"><img :src="filmInfo.poster" alt="" width="100%"></div>
                <div class="filminfo">
                    <span>
                        <span class="filmName">{{ filmInfo.name }}</span>
                        <span class="filmType">{{ filmInfo.filmType.name }}</span>
                        <span class="filmGrade">
                            <span v-if="filmInfo.grade">{{ filmInfo.grade }}分</span>
                            <span v-if="!filmInfo.grade">暂无评分</span>
                        </span>
                    </span>
                    <span class="category">{{ handlecatego(filmInfo.category) }}</span>
                    <span>{{ handlepremier(filmInfo.premiereAt) }}上映</span>
                    <span>{{ filmInfo.nation }}|{{ filmInfo.runtime }}分钟</span>
                    <span class="synopsis" :id="active">{{ filmInfo.synopsis }}</span>
                    <p @click="toggleClass" style="text-align: center;">👇</p>
                </div>
                <div class="filmActors">
                    <span class="actors">演职人员</span>
                    <swiper class="swiper" :slidesPerView="3" name="filmactors">
                        <swiper-item  v-for="(data,index) in filmInfo.actors" :key="data.name+index" class="swiperItem">
                            <div><img :src="data.avatarAddress" alt="" class="filmActors_avatarAddress"></div>
                            <div>{{ data.name }}</div>
                            <div class="role">{{ data.role }}</div>
                        </swiper-item>
                    </swiper>
                </div>
                <div class="filmActors">
                    <span class="actors">剧照</span>
                    <swiper class="swiper" :slidesPerView="2.2" name="photos">
                        <swiper-item  v-for="(data,index) in filmInfo.photos" :key="data" class="swiperItem" >
                            <div>
                                <img :src="data" alt="" class="film_photos" @click="handlepreview(index)">
                            </div>
                        </swiper-item>
                    </swiper>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {createApp} from 'vue'
import swiper from '@/components/move/detail/detailSwiper.vue'
import swiperItem from '@/components/move/detail/detailSwiperItem.vue'
import detailHeader from '@/components/move/detail/detailHeader.vue'
import { showImagePreview } from 'vant'
import  isShow from '@/util/IsShowNavBar'
import http from '@/util/http'
// import isShow from '@/util/IsShowNavBar'
const app = createApp()
export default {
  mixins: [isShow],
  data () {
    return {
      filmInfo: null,
      active: ''
    }
  },
  directives: {
        scroll:{
            mounted (el, binding = 50) {
                // el.style.display = 'none'
                el.style.opacity = 0
                // console.log(11)
                window.onscroll = () => {
                    if ((document.documentElement.scrollTop || document.body.scrollTop) > binding.value) {
                        // el.style.display = 'block'
                        el.style.opacity = 1

                    } else {
                        // el.style.display = 'none'
                        el.style.opacity = 0

                    }
                }
        },
            onbind () {
                window.onscroll = null
            }
        },
  },
  created () {
    // console.log(this.$route.params)
    // this.id = this.$route.params.id
    http({
      url: `/gateway?filmId=${this.$route.params.filmId}&k=6700286`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      // console.log(res.data.data.film)
      // console.log(this.filmInfo)
      this.filmInfo = res.data.data.film
    })
    //
  },
  unmounted () {
    // console.log('自己的destroyed')
  },
  mounted () {
  },
  methods: {
    handlecatego(data){
        return data.split('|').join(' | ')
    },
    handlepremier(data){
        const date = new Date(data * 1000) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        const Year = date.getFullYear()
        const Month = (date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
        const Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
        return Year + '-' + Month + '-' + Day
    },
    toggleClass () {
      // console.log(11)
      this.active = this.active == 'active' ? '' : 'active'
    },
    handlepreview (index) {
    //   console.log(this.filmInfo.photos[index])
      showImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        closeable: true,
        closeIconPosition: 'top-left'
      })
    }
  },
  components: {
    swiper,
    swiperItem,
    detailHeader
  }
}
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

#detail {
    background-color: rgba($color: #000000, $alpha: 0.2);
    transform: none;
    -webkit-overflow-scrolling: touch;
    // opacity: 0.5;
    .content {
        // margin: 5px 15px;
        .filminfo {
            padding: 5px 15px;
            background-color: white;
            display: flex;
            flex-direction: column;
            font-size: 13px;
            color: gray;

            >span {
                margin-top: 8px;
            }

            .filmName {
                font-size: 18px;
                color: black;
            }

            .filmType {
                color: white;
                background-color: gray;
                opacity: 0.3;
                font-size: 9px;
                display: inline-block;
                // vertical-align: top;
                transform: translateY(-20%);
                padding: 0 2px;
                margin: 0 5px;
            }

            .filmGrade {
                float: right;
                font-size: 18px;
                color: orange;
                font-style: italic;
            }

            .synopsis {
                margin: 15px 0;
                height: 34px;
                overflow: hidden;
                transition: all 0.7s;

            }
            #active{
                height: 150px;
            }
        }
        .filmPoster {
            padding: 5px 15px;
            background-color: white;
            // width: 100%;
            height: 56vw;
            overflow: hidden;
            position: relative;
            overflow: hidden;

            img {
                width: 100%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                /* -webkit-transform: translateY(-50%); */
                -o-transform: translateY(-50%);

            }
        }
        .filmActors {
            background-color: white;
            padding: 5px 15px;
            // width: 100%;
            margin-top: 20px;
            box-sizing: border-box;
            .actors {
                font-size: 18px;
            }
            .swiper{
                text-align: center;
                width: 100%;
                height: 200px;
                // box-sizing: border-box;
                .swiperItem {
                    // margin: 10px;
                    .role {
                        color: gray;
                    }
                }
                .filmActors_avatarAddress{
                    width: 85px;
                    height: 117px;
                }
            }
            .film_photos{
                width: 150px;
                height: 63px;
                // margin: 15px;
            }
        }
    }
}
</style>
<style lang="scss" scoped>
</style>
